<template>
  <!--查看明细-->
	<div id="app" class="ivcodeback">
      <loading v-if="loading"></loading>
      <div v-else>
          <!--我的邀请码-->
          <div class="my-ivcode" v-if="!uid">
              <div class="friend-info">
                  <div v-if="false">
                      <div class="head"><img src="../../../assets/img/second_tag.png" alt=""></div>
                      <p>娇羞</p>
                      <p>ID: <span>12345</span></p>
                  </div>
              </div>          
              <div class="my-ivcodebox">
                  <div>
                    <input type="tel" id="foo" :value="mycode" style="opacity: 0;">
                  </div>
                  <button class="copycode" type="button" data-clipboard-demo data-clipboard-target="#foo" v-text="mycode"></button>
                  <p class="font24">长按数字复制</p>
              </div>
              <!--补充 data-clipboard-target="#labelbox"  -->
              <div class="input-box">
                  <input type="tel" class="input-code" v-model="code" placeholder="请输入邀请码">
              </div>
              <div class="save-btn" @click="savecode">提交享受首充优惠</div>
              <div class="share">
                  <p class="font24" style="margin-bottom: .26rem;">分享奖励</p>
                  <p class="font24">每邀请一个好友在充值音符后，都会获得5%的返点奖励</p>
                  <p class="font24">该奖励会直接转至您的钱包音符中</p>
              </div>
              <div class="bottom-btn">
                  <div class="share-btn" @click="goShare">分享给好友</div>
                  <div class="iv-friend">
                      <p class="font">1213</p>
                      <p class="font24">邀请好友</p>
                  </div>
                  <div class="iv-friend iv-friend1">
                      <p class="font">1213</p>
                      <p class="font24">获得佣金</p>
                  </div>
              </div>
          </div>  
          <!--分享出去进来的-->     
          <div class="my-ivcode"  v-if="uid">
              <div class="friend-info">
                  <div>
                      <div class="head"><img :src="ivInfo.head" alt=""></div>
                      <p v-text="ivInfo.nickname || '无名氏'">娇羞</p>
                      <p>ID: <span v-text="ivInfo.uid || 0">12345</span></p>
                  </div>
              </div>          
              <div class="my-ivcodebox my-ivcodebox2">
                  <h3>我在这里渡过了<span v-text="ivInfo.days">32</span>天</h3>
                  <h3>结交了<span v-text="ivInfo.people">281</span>位好友</h3>
                  <p class="font24 colre">期待你的加入，成为我的好友</p>
              </div>
              <div class="save-btn" @click="godown">我要加入</div>
             <div class="ta-code" v-text="ivInfo.fromcode || 0">12145</div>
             <p class="bottom-code">TA的邀请码</p>
          </div>   
      </div>
      <prompt title="绑定邀请人" :childTitle="'确定邀请码为'+typeVal+'您的邀请用户'" v-if="isShow" @cancelBox='closelBox' @sureFun = "sureBind"></prompt>      
	</div>
</template>
<script>
    import 'assets/css/common.css'
    import './index.css'
    import common from 'assets/js/common'
    import ClipboardJS from 'clipboard'
    import download from 'assets/js/download';
    import Loading from "components/loading.vue"
    import Prompt from "components/prompt.vue"
export default {
  data() {
    return {
        pickerVisible:'',
        code:'',
        mycode:'',
        loading:true,
        isShow:false,
        typeVal:'123',
        uid:'',
        token:false,
        ivInfo:{}  
    }
  },
  //实例初始化最之前，无法获取到data里的数据
  beforeCreate(){
  	
  	
  },  
  //在挂载开始之前被调用
  beforeMount(){
  	
  
  }, 
  components:{Prompt,Loading},
  //已成功挂载，相当ready()
  mounted(){

      this.uid = parseInt(common.getQueryString('uid'));

      if(this.uid){
          this.getIvinfo();
          $('title').text('邀请您');
      }else{
          //获取我的邀请码
          this.getcode();
          $('title').text('我的邀请码');
      }

    var clipboard = new ClipboardJS('.copycode');

    clipboard.on('success', function(e) {
        console.info('Text:', e.text);
        common.errMessage("复制成功");
        e.clearSelection();
    });

    clipboard.on('error', function(e) {
        console.log('复制出问题啦');
    });



      //点击分享给好友 
      window["goShare"] = ()=>{
        
        if(common.platform == 'ios'){
            share();
        }else{
            window.user.share();
        }
      }

  },
  //相关操作事件
  methods: {
    //分享给好友
    goShare(){
        console.log('===');
        window.goShare();
    },
    //获取邀请人信息
    getIvinfo(){
        common.ajax({
            url:'api/share/fromcode/'+this.uid,
            type:'GET'
        }).then(res=>{
            this.loading = false;
            this.ivInfo = res.data;
        })
    },
    //去下载
    godown(){
         download.openApp();
    },
    //获取邀请码
    getcode(){
       common.ajax({
          url:'api/member/fromcode',
          type:'GET'
       }).then(res=>{
          this.loading = false;
          this.mycode = res.data.code;
       })
    },
    //保存其他邀请码
    savecode(){
       if(this.code){
           common.ajax({
              url:'api/member/fillcode',
              type:'POST',
              data:{
                fromcode:parseInt(this.code)
              }
           }).then(res=>{
              common.errMessage('提交成功');
           })
       }else{
            common.errMessage('请填写邀请码');
       }
    },
    closelBox(){
       this.isShow = false;
    },
    //确定之后的操作
    sureBind(){
        console.log("确定提交");
    }     
  }
}
</script>
